 <template>
    <div id="echarts-line">
    </div>
</template>
<script>
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入 ECharts 主题
import customTheme from './theme/custom.json'

// 引入 折线图
import 'echarts/lib/chart/line'

export default {
    name: 'echarts-line',
    props: {
        option: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            lineOption: {
                title: {
                    text: this.option.title.text,
                    top: 14,
                    left: 14,
                    textStyle: {
                        fontSize: 14
                    }
                },
                legend: {
                    type: 'scroll',
                    top: 14,
                    right: 14,
                    bottom: 0,
                    data: this.option.legend.data
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#fff',
                    padding: 10,
                    textStyle: {
                        color: '#657180',
                        fontSize: 13
                    },
                    extraCssText: 'box-shadow: 0 0 4px rgba(0, 0, 0, 0.1)',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#fff',
                            textStyle: {
                                color: '#657180'
                            }
                        }
                    }
                },
                grid: {
                    left: 24,
                    right: 24,
                    top: 68,
                    bottom: 18,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.option.xAxis.data
                },
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: this.option.series
            }
        }
    },
    mounted() {
        echarts.registerTheme('westeros', customTheme)
        let lineCharts = echarts.init(this.$el, 'westeros')
        lineCharts.setOption(this.lineOption)
        window.onresize = function() {
            lineCharts.resize()
        }
    }
}
</script>
<style lang="less" scopoe>
@import '~@/assets/style/theme/index';
#echarts-line {
    width: 100%;
    height: 420px;
}
</style>